<!-- src/App.vue - 应用的根组件 -->
<!-- 
  这是整个应用的根组件，作为所有其他组件的容器。
  它的主要职责是：
  1. 提供应用的基本布局结构
  2. 导入并使用主要的功能组件
  3. 作为组件树的起点
-->

<template>
  <!-- 
    id="app" 是应用的根节点，与 main.js 中的 mount('#app') 对应
    这里使用了 TodoList 组件作为应用的主要内容
  -->
  <div id="app">
    <TodoList />
  </div>
</template>

<script setup>
// 导入 TodoList 组件，这是应用的核心功能组件
// 使用 Vue 的 <script setup> 语法，这是 Vue 3 组合式 API 的语法糖
import TodoList from './components/TodoList.vue'
</script>

<style scoped>
/* 
  这里可以添加应用级别的样式
  scoped 属性确保这些样式只应用于当前组件
  目前不需要特定样式，因为布局由 TodoList 组件处理
*/
</style>